<template>
    <div id="docUploadImg">
        <div class="applicable-container" @click="choseApp(-1)" v-show='showTip'>
            <div class="app-content">
                <ul class="item-nav">
                    <li v-for="(item,index) in dataList" @click.stop="choseApp(index)">
                        {{item}}
                    </li>
                </ul>
                <div class="cancle" @click="choseApp(-1)">取消</div>
            </div>
        </div>
        <header>
            <i @click="goBack()"></i>
            <div>上传影像</div>
        </header>
        <div class="border-8"></div>
        <div class="box">
            <ul>
                <li class='mc' v-if="list.length<1">
                    <div>
                        <img src="../../../image/no_wifi@2x.png" width='156' alt="">       
                    </div>
                    <p>暂无影像图片!</p>
                </li>
                <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
                    <img class='pic' src="../../../img/9k=.jpg" alt="">
                </li>
            </ul>
            <p>上传影像: 支持png,jpg格式的图片</p>
            <a href="javascript:;"  @click="showTip=true">上传</a>
        </div>
        <iframe name="myiframe" width="0" height="0" scrolling="no" style="display: none"></iframe>
		<form id='myupload' :action='$api.baseURLUpload+"/photos/upload_shop"' method='post' enctype='multipart/form-data' target="myiframe">
            <input type="file" name="file" class="camera" accept="image/*" capture="camera" @change="upfile">
  			<input type="file" name="file" class="photo"  @change="upfile">
        </form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [1],
                // dataList: ['从相册选择','拍照'],
                dataList: ['从相册选择'],
                showTip: false, //是否显示选择拍照或相册的蒙层
            }
        },
        components: {

        },
        methods: {
            goBack() {
                this.$router.back();
            }, 
            choseApp(index) {
                if(index==0) {
                    $(".photo").click();
                }else if(index==1) {
                    $("input[capture='camera']").click();
                }
                this.showTip = false;
            },  
            //上传图片
			upfile() {
				var file = event.target.files, file;
				file = file[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {
					this.$utils._toast('请确保文件为图像类型');
					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				if(file) {
					Indicator.open({
					    text: '加载中...',
					    spinnerType: 'fading-circle'
					});
					var options  = {
			            url: this.$api.baseURLUpload+"/photos/upload_shop",   //同action
			            type:'post',
			            beforeSend:function(xhr){//请求之前

			            },
			            uploadProgress: function(event, position, total, percentComplete) {

			            },
			            success:function(data) {
							if(data.state == 200) {
								console.log(data);
								// // 修改头像
							    // const params = {
								// 	id: _this.userid,
								// 	pic: data.result,
								// };
								// _this.changeUserPic(params);
							}
			            },
			            error: function(xhr,status,msg){
							_this.$utils._toast("上传失败");
			            }
			        };
				    $("#myupload").ajaxSubmit(options);
				}
			},
        },
        created() {

        },
        mounted() {
        }
    }
</script>
<style lang="scss" scoped>
	.mc {
        div {
            width: 102px;
            margin: 0px auto;
            img {
                display: block;
            }
        }
		p {
			padding-top: 10px;
			text-align: center;
		}
    }
    .applicable-container{
		position: fixed;
	    top: 0px;
	    left: 0px;
	    background-color: rgba(0,0,0,0.5);
	    z-index: 1000;
	    width: 100%;
	    height: 100%;
	    .app-content{
	    	padding:  10px;
	    	position: fixed;
	    	bottom: 0px;
	    	width: 100%;
	    	left: 0px;
	    }
	   	.item-nav{
	   		margin-bottom: 8px;
	   		background-color: #FFF;
	   		border-radius: 10px;
               padding: 0px 15px;
               color: #409EFF;
	   		li{
	   			font-size: 16px;
	   			width: 100%;
	   			text-align: center;
	   			padding: 13px 0px;
	   			border-bottom: 1px solid #EEE;
	   		}
	   		li:last-child{
	   			border-bottom: 0px;
	   		}
	   	}
	   	.cancle{
	   		padding: 13px 10%;
	   		font-size: 16px;
	   		text-align: center;
	   		background-color: #FFF;
	   		border-radius: 10px;
	   	}
    }
    input[capture=camera],input[type=file] {
		position: absolute;
		opacity: 0;
		z-index: -1;
	}
</style>
